<template>
  <div v-loading="loading">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="dataForm">
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('尽调清单大类')" prop="categoriesType">
            <el-select v-model="form.categoriesType" :placeholder="$t('尽调清单大类')" :disabled="!!form.id" @change="categoriesTypeChange">
              <el-option
                v-for="(dict, index) in categoriesTypeOptions"
                :key="index"
                :label="$t(dict.dictLabel)"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('尽调清单子类')" prop="categoriesChildType">
            <el-select v-model="form.categoriesChildType" :placeholder="$t('尽调清单子类')" :disabled="!!form.id">
              <el-option
                v-for="(dict, index) in categoriesTypeChildrenOptions"
                :key="index"
                :label="$t(dict.dictLabel)"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="area-header">
        <span class="area-header-title">{{ $t('尽调内容') }}</span>
      </div>
      <el-table class="nowrapTable formTable" :data="form.contentList" border>
        <el-table-column :label="$t('尽调内容')" align="center" prop="content">
          <template slot="header" slot-scope="{}">
            <i style="color: #ff4949;margin-right: 4px;">*</i>
            <span>{{ $t('尽调内容') }}</span>
          </template>
          <template slot-scope="scope">
            <el-form-item :prop="'contentList.' + scope.$index + '.content'" :rules="[{required: true, message: $t('必填信息'), trigger: ['blur', 'change']}]">
              <el-input v-model="scope.row.content" type="textarea" :autosize="{ minRows: 2 }" :maxlength="2000" show-word-limit :placeholder="$t('尽调内容')" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column :label="$t('操作')" align="center" width="80">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-delete" @click="delContent(scope.$index, scope.row)">{{ $t('删除') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="tol">
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="addContent">{{ $t("添加") }}</el-button>
      </div>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: right;">
      <!--保存，保存并启动流程，取消 三个按钮-->
      <SaveBtn />
    </div>
  </div>
</template>

<script>
  import { saveContent, getByDealIdAndCategoriesChildType } from '@/api/deal/dd/dealDd'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  export default {
    data() {
      return {
        // 表单参数
        form: {
          contentList: []
        },
        // 遮罩层
        loading: false,
        // 表单校验
        rules: {
          categoriesType: [
            { required: true, message: this.$t('必填信息'), trigger: ['blur', 'change'] }
          ],
          categoriesChildType: [
            { required: true, message: this.$t('必填信息'), trigger: ['blur', 'change'] }
          ],
          sort: [
            { required: true, message: this.$t('必填信息'), trigger: ['blur', 'change'] }
          ]
        },
        // 尽调清单大类
        categoriesTypeOptions: [],
        // 尽调清单子类
        categoriesTypeChildrenOptions: []
      }
    },
    created() {
      this.getDicts('dd_categories_type').then(response => {
        this.categoriesTypeOptions = response.data
      })
    },
    methods: {
      // 初始化数据
      init(data) {
        this.loading = true
        if (data != null && data.id !== undefined) {
          debugger
          getByDealIdAndCategoriesChildType(data.dealId, data.categoriesChildType).then(response => {
            this.form = response.data
            this.categoriesTypeChange(this.form.categoriesType)
            this.loading = false
          })
        } else {
          this.reset()
          this.loading = false
        }
      },
      // 表单重置
      reset() {
        this.form = {
          id: undefined,
          dealId: this.$route.query.id,
          categoriesType: undefined,
          categoriesChildType: undefined,
          createBy: undefined,
          createTime: undefined,
          updateBy: undefined,
          updateTime: undefined,
          sort: undefined,
          contentList: []
        }
        this.resetForm('form')
      },
      // 取消按钮
      cancel() {
        this.$parent.$parent.formOpen = false
        this.$parent.$parent.reset()
      },
      // 关闭form页面
      closeForm() {
        // 关闭form页面遮罩层
        this.loading = false
        // 关闭form页面
        this.$parent.$parent.formOpen = false
        // 刷新list页面
        this.$parent.$parent.initIndex(this.$route.query.id)
      },
      /** 提交按钮 */
      submitForm: function() {
        this.$refs['form'].validate(valid => {
          if (valid) {
            this.loading = true
            saveContent(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess(this.$t('保存成功'))
                this.closeForm()
              } else {
                this.msgError(response.msg)
              }
              this.loading = false
            }).catch(() => {
              this.loading = false
            })
          } else {
            this.locationError(document)
          }
        })
      },
      // 尽调清单大类change
      categoriesTypeChange(val) {
        if (this.form.id === undefined) {
          this.form.categoriesChildType = undefined
        }
        for (let i = 0; i < this.categoriesTypeOptions.length; i++) {
          if (this.categoriesTypeOptions[i].dictValue === '' + val) {
            this.getDicts(this.categoriesTypeOptions[i].childDict).then(response => {
              this.categoriesTypeChildrenOptions = response.data
            })
            return
          }
        }
      },
      // 删除关键字列表
      delContent(index) {
        var _this = this
        _this.$confirm(_this.$t('是否确认删除?'), _this.$t('警告'), {
          confirmButtonText: _this.$t('确定'),
          cancelButtonText: _this.$t('取消'),
          type: 'warning'
        }).then(function() {
          _this.form.contentList.splice(index, 1)
          _this.msgSuccess(_this.$t('删除成功'))
        }).catch(function() {
        })
      },
      // 添加尽调内容
      addContent() {
        const row = {
          id: undefined,
          content: undefined
          // sort: this.form.contentList.length + 1
        }
        if (!(this.form.contentList instanceof Array)) {
          this.$set(this.form, 'contentList', [])
        }
        this.$nextTick(() => {
          this.form.contentList.push(row)
        })
      }
    }
  }
</script>
